<template>
  <div class="orderInfo">
    <section class="info">
      <section class="order_title" >
        <img :src="restaurant_image_url" />
        <p>{{status}}</p>
        <p></p>
        <div class="order_again" @click="buyAgain(id)">再来一单</div>
      </section>
      <section class="food_list">
        <a class="food_list_header">
          <div class="shop_name">
            <img :src="restaurant_image_url" />
            <span>{{restaurant_name}}</span>
          </div>
          <span>&lt;</span>
        </a>
        <ul class="food_list_ul">
          <li v-for="dish in dishgroup"
          :key="dish._id"
          >
            <p class="food_name ellipsis">{{dish.name}}</p>
            <div class="quantity_price">
              <span>X{{dish.quantity}}</span>
              <span class="price">¥{{dish.price}}</span>
            </div>
          </li>
        </ul>
        <div class="deliver_fee">
          <span>{{deliver_name}}</span>
          <span>{{deliver_fee}}</span>
        </div>
        <div class="pay_ment">实付{{total_amount}}</div>
      </section>
      <section class="order_detail_style">
        <header>配送信息</header>
        <section class="item_style">
          <p class="item_left">送达时间：</p>
          <div class="item_right">
            <p>{{deliver_time}}</p>
          </div>
        </section>
        <section class="item_style">
          <p class="item_left">送货地址：</p>
          <div class="item_right">
            <p>{{consignee}}</p>
            <p>{{phone}}</p>
            <p></p>
          </div>
        </section>
        <section class="item_style">
          <p class="item_left">配送方式：</p>
          <div class="item_right">
            <p>蜂鸟专送</p>
          </div>
        </section>
      </section>
      <section class="order_detail_style">
        <header>订单信息</header>
        <section class="item_style">
          <p class="item_left">订单号：</p>
          <div class="item_right">
            <p>{{id}}</p>
          </div>
        </section>
        <section class="item_style">
          <p class="item_left">支付方式：</p>
          <div class="item_right">
            <p>{{pay_method}}</p>
          </div>
        </section>
        <section class="item_style">
          <p class="item_left">下单时间：</p>
          <div class="item_right">
            <p>{{order_time}}</p>
          </div>
        </section>
      </section>
    </section>
  </div>
</template>

<script>
export default {
  name: "OrderInfo",
  props: {
    restaurant_image_url: {
      type: String,
      default: ""
    },
    status: {
      type: String,
      default: ""
    },
    restaurant_name: {
      type: String,
      default: ""
    },
    dishgroup: {
      type: []
    },
    deliver_name: {
      type: String,
      default: ""
    },
    deliver_fee: {
      type: Number,
      default: 0
    },
    total_amount: {
      type: Number,
      default: 0
    },
    deliver_time: {
      type: String,
      default: ""
    },
    consignee: {
      type: String,
      default: ""
    },
    phone: {
      type: String,
      default: ""
    },
    id: {
      type: Number,
      default: 0
    },
    pay_method: {
      type: String,
      default: ""
    },
    order_time: {
      type: String,
      default: ""
    }
  },
  methods:{
    //再来一单
    buyAgain(id) {
      console.log(id)
      this.$router.push("/browerStore/" + id)
    }
  }
}
</script>

<style lang="less">
.orderInfo {
  background-color: #f1f1f1;
  margin-top: 1rem;
}
.order_title {
  padding: 1rem;
  background-color: #fff;
  margin-bottom: 0.5rem;
  img {
    border: 0.05rem solid #3190e8;
    border-radius: 50%;
    width: 5rem;
    height: 5rem;
  }
  p {
    font-size: 1.2rem;
    color: #333;
    font-weight: 700;
    margin-top: 0.6rem;
  }
  .order_again {
    font-size: 0.8rem;
    color: #3190e8;
    margin-top: 0.5rem;
    border: 0.025rem solid #3190e8;
    padding: 0.15rem 0.4rem;
    border-radius: 0.1rem;
    width: 5rem;
    height: 1.2rem;
    margin-left: 50%;
    transform: translateX(-50%);
  }
}
.food_list {
  background-color: #fff;
  margin-bottom: 1rem;
  .food_list_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0.5rem;
    border-bottom: 1px solid #f5f5f5;
    .shop_name {
      img {
        width: 2rem;
        height: 2rem;
        vertical-align: middle;
        margin-right: 0.5rem;
        margin-left: 1rem;
      }
      span {
        font-size: 1.1rem;
        color: #333;
        font-weight: 700;
      }
    }
  }
  .food_list_ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.5rem;
    line-height: 2rem;
    .food_name {
      align-items: left;
      font-size: 0.9rem;
      color: #666;
      flex: 4;
      text-align: left;
    }
    .quantity_price {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.8rem;
      color: #ccc;
      .price {
        color: #666;
      }
    }
  }
  .deliver_fee {
    display: flex;
    justify-content: space-between;
    align-items: left;
    padding: 0 0.5rem;
    line-height: 2rem;
    border-top: 1px solid #f5f5f5;
    span {
      font-size: 0.9rem;
      color: #666;
    }
  }
  .pay_ment {
    font-size: 1rem;
    color: #fb6b23;
    border-top: 1px solid #f5f5f5;
    font-weight: 700;
    line-height: 2rem;
    text-align: right;
    padding-right: 0.5rem;
  }
}
.order_detail_style {
  background-color: #fff;
  margin-bottom: 0.5rem;
  header {
    font-size: 1.1rem;
    text-align: left;
    color: #333;
    padding: 0.5rem;
    border-bottom: 1px solid #f5f5f5;
  }
  .item_style {
    display: flex;
    padding: 0.5rem;
    p {
      padding: 0.2rem;
      font-size: 0.95rem;
      color: #666;
      line-height: 1rem;
      text-align: left;
    }
  }
}
</style>
